<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解忧杂货注册</title>
	<link rel="stylesheet" href="./css/style.css">
	<!-- 在<head>中添加这行 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
	
</head>
<body>
    <!-- 添加音乐控制器 -->
<div class="music-control playing">
    <div class="vinyl-record">
        <div class="vinyl-inner"></div>
        <div class="vinyl-label">
            <!-- 在这里添加图片 -->
            <img src="./images/autumn.png" alt="label" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
        </div>
        <div class="vinyl-shine"></div>
    </div>
</div>
    
    <!-- 添加音频元素 -->
    <audio id="bgMusic" loop autoplay>
        <source src="./images/autumn.mp3" type="audio/mpeg">
    </audio>

	
	
    <section>
        <div class="leaves">
            <div class="set">
                <div><img src="./images/leaf_01.png"></div>
                <div><img src="./images/leaf_02.png"></div>
                <div><img src="./images/leaf_03.png"></div>
                <div><img src="./images/leaf_04.png"></div>
                <div><img src="./images/leaf_01.png"></div>
                <div><img src="./images/leaf_02.png"></div>
                <div><img src="./images/leaf_03.png"></div>
                <div><img src="./images/leaf_04.png"></div>
            </div>
        </div>
        <img src="./images/bg.jpg" class="bg">
        <img src="./images/girl.png" class="girl">
        <img src="./images/trees.png" class="trees">
        
        <section class="register-section">
            <div class="register-container">
                <h1>创建账号</h1>
                
                <div class="register-tabs">
                    <a href="#phone" class="active">手机号注册</a>
                    <a href="#email">邮箱注册</a>
                </div>

                <div class="register-form active" id="phone">
                    <div class="form-group">
                        <label>手机号</label>
                        <div class="input-wrapper">
                            <i class="fas fa-mobile-alt"></i>
                            <input type="tel" placeholder="请输入手机号">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>验证码</label>
                        <div class="input-wrapper verification">
                            <i class="fas fa-shield-alt"></i>
                            <input type="text" placeholder="请输入验证码">
                            <button class="btn-send-code">获取验证码</button>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>设置密码</label>
                        <div class="input-wrapper">
                            <i class="fas fa-lock"></i>
                            <input type="password" placeholder="请设置6-20位密码">
                            <i class="fas fa-eye-slash toggle-password"></i>
                        </div>
                        <div class="password-strength">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>确认密码</label>
                        <div class="input-wrapper">
                            <i class="fas fa-lock"></i>
                            <input type="password" placeholder="请再次输入密码">
                            <i class="fas fa-eye-slash toggle-password"></i>
                        </div>
                    </div>
                </div>

                <div class="register-form" id="email">
                    <div class="form-group">
                        <label>邮箱</label>
                        <div class="input-wrapper">
                            <i class="fas fa-envelope"></i>
                            <input type="email" placeholder="请输入邮箱">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>验证码</label>
                        <div class="input-wrapper verification">
                            <i class="fas fa-shield-alt"></i>
                            <input type="text" placeholder="请输入验证码">
                            <button class="btn-send-code">获取验证码</button>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>设置密码</label>
                        <div class="input-wrapper">
                            <i class="fas fa-lock"></i>
                            <input type="password" placeholder="请设置6-20位密码">
                            <i class="fas fa-eye-slash toggle-password"></i>
                        </div>
                        <div class="password-strength">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>确认密码</label>
                        <div class="input-wrapper">
                            <i class="fas fa-lock"></i>
                            <input type="password" placeholder="请再次输入密码">
                            <i class="fas fa-eye-slash toggle-password"></i>
                        </div>
                    </div>
                </div>

                <div class="agreement">
                    <label class="checkbox-wrapper">
                        <input type="checkbox" checked>
                        <span>我已阅读并同意</span>
                    </label>
                    <a href="#">《用户协议》</a>
                    <span>和</span>
                    <a href="#">《隐私政策》</a>
                </div>

                <button class="btn-register">立即注册</button>

                <div class="login-link">
                    已有账号？<a href="../main-index/index.html">立即登录</a>
                </div>
            </div>
        </section>
    </section>
	<script src="js/check.js"></script>

                    </body>
                    </html>